<style scoped>
.head-bg{width: 100%;}
.user-login{padding: 0 20px;padding-bottom: 20px;background: var(--color-bg-0);border-radius: 20px;margin-top: -20px;z-index: 2;position: relative;}
.user-login>h1{font-size: 36px;font-weight: bold;padding-top: 20px;}
.user-login .form-option{border-bottom: 1px solid #e7e7e7;width: 100%;padding: 20px 0 5px;}
.user-login .form-option input[type="text"],
.user-login .form-option input[type="password"]{background: none;border: none;outline: none;width: 100%;line-height: 40px;font-size: 20px;}
.user-login .tips{font-size: 16px;margin-top: 25px;color: #007AFF;}
.user-login .submit{margin-top: 25px;}
</style>
<template>
  <div class="page">
    <img-referrer class="head-bg" src="//taiyushangdao-saas.oss-cn-chengdu.aliyuncs.com/uploads/2023/0417/152117812505.png" />

    <form class="user-login" ref="form" @submit.prevent="onsubmit">
      <h1>管理员登录</h1>
      <div class="form-option flex">
        <input type="text" v-model="param.name" placeholder="请输入用户名" />
      </div>
      <div class="form-option flex">
        <input type="password" v-model="param.password" autocomplete="new-password" placeholder="请输入登录密码" />
      </div>

      <van-button class="submit" block round size="large" type="primary" native-type="submit">登录</van-button>
    </form>

    <img-code ref="img_code_obj" v-model:show="img_code.show" :img_data="img_code.img_data" @click:point="click_point" style="z-index: 5;"></img-code>
  </div>
</template>

<script>
import s94 from "s94-js";
import ImgCode from "@/components/ImgCode.vue";
import router from "@/vue_plugin/router_auto.js";
import {ajax} from "@/js/api_tool.js";
import {msg} from "@/js/vant_tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

export default {
  name: "login",
  components: {ImgReferrer, ImgCode},
  data: function(){
    let app = this;
    return {
      param: {
        name: '',
        password: '',
      },
      img_code: {
        show: false,
        img_data(){
          return s94(function (resolve){
            ajax('/home/api/img_code', (res)=>{ resolve(res.data);return false; })
          })
        },
      }
    }
  },
  methods: {
    click_point(){},
    get_img_code(){
      let app = this;
      return new Promise((resolve)=>{
        this.$refs.img_code_obj.refresh();
        this.img_code.show = true;
        this.click_point = function (point_arr){
          resolve(point_arr[0]);
          app.img_code.show = false;
        }
      })
    },
    onsubmit: function(){
      let app = this;
      if(!/^.+$/.test(this.param.name)) return msg.fail('用户名必填');
      if(!/^.+$/.test(this.param.password)) return msg.fail('密码必填');
      let data = {
        name:this.param.name,
        password:this.param.password,
      };
      this.get_img_code().then((point)=>{
        data = Object.assign(data, point);
        ajax({url:'/admin/index/login', data:data, loading:1, method:'POST'}, (res)=>{
          setTimeout(()=>{router.back()}, 1500)
        })
      })
    },
  },
  mounted() {
  }

}
</script>